<div class="page-width">
  {% if section.settings.title != blank %}
    <header class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </header>
  {% endif %}

  {%- assign blog = blogs[section.settings.blog] -%}

  {% unless blog.articles_count == 0 %}
    <ul class="grid grid--uniform grid--blog">
      {% for article in blog.articles limit: section.settings.post_limit %}
        <li class="grid__item medium-up--one-third">
          <a href="{{ article.url }}" class="article__link">
            {% if article.image %}
              {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              {% include 'image-style' with image: article.image, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}
              <div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
                <div class="article__grid-image-container" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
                  <img id="{{ img_id }}"
                      class="article__grid-image lazyload"
                      src="{{ article.image | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ article.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="">
                </div>
              </div>
              <noscript>
                <div class="article__grid-image-wrapper">
                  {{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
                </div>
              </noscript>
            {% endif %}

            <h3 class="article__title">
              {{ article.title }}
            </h3>
          </a>

          <div class="article__grid-meta">
            {% if section.settings.blog_show_author %}
              <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
            {% endif %}

            {% if section.settings.blog_show_date %}
              <span class="article__date">
                {{ article.published_at | time_tag: format: 'date' }}
              </span>
            {% endif %}

            <div class="rte article__grid-excerpt">
              {% if article.excerpt.size > 0 %}
                {{ article.excerpt }}
              {% else %}
                {{ article.content | strip_html | truncate: 150 }}
              {% endif %}
            </div>

            {% if article.tags.size > 0 %}
              <div class="article__tags rte">
                <ul class="list--inline" aria-label="{{ 'blogs.article.tags' | t }}">
                  {% for tag in article.tags %}
                    <li>
                      <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="article__grid-tag">{{ tag }}</a>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}

            <ul class="list--inline article__meta-buttons">
              <li>
                <a href="{{ article.url }}" class="btn btn--tertiary btn--small" aria-label="{{ 'blogs.article.read_more_title' | t: title: article.title }}">
                  {{ 'blogs.article.read_more' | t }}
                </a>
              </li>

              {% if blog.comments_enabled? and article.comments_count > 0 %}
                <li>
                  <a href="{{ article.url }}#comments" class="article__comment-count btn btn--tertiary btn--small">
                    {{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
                  </a>
                </li>
              {% endif %}
            </ul>
          </div>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <div class="grid grid--uniform grid--blog">
      {% for i in (1..section.settings.post_limit) %}
        <div class="grid__item medium-up--one-third">
          <div class="article__grid-meta">
            <h3 class="article__title">
              <a href="#">{{ 'homepage.onboarding.blog_title' | t }}</a>
            </h3>

            {% if section.settings.blog_show_author %}
              <span class="article__author">{{ 'homepage.onboarding.blog_author' | t }}</span>
            {% endif %}

            <div class="rte article__grid-excerpt">
              {{ 'homepage.onboarding.blog_excerpt' | t }}
            </div>

            <ul class="list--inline article__meta-buttons">
              <li>
                <a href="{{ article.url }}" class="btn btn--tertiary btn--small">
                  {{ 'blogs.article.read_more' | t }}
                </a>
              </li>
            </ul>
          </div>
        </div>
      {% endfor %}
    </div>
  {% endunless %}

  {% if section.settings.show_view_all %}
    <hr class="hr--invisible" aria-hidden="true"></hr>
    <div class="text-center">
      <a href="{{ blog.url }}" class="btn" aria-label="{{ 'blogs.article.view_all_blogs' | t }}">
        {{ 'blogs.article.view_all' | t }}
      </a>
    </div>
  {% endif %}
</div>



{% schema %}
{
  "name": {
    "da": "Blogopslag",
    "de": "Blogposts",
    "en": "Blog posts",
    "es": "Entradas del blog",
    "fi": "Blogijulkaisut",
    "fr": "Articles de blog",
    "hi": "ब्लॉग पोस्ट",
    "it": "Articoli del blog",
    "ja": "ブログ記事",
    "ko": "블로그 게시물",
    "ms": "Catatan blog",
    "nb": "Blogginnlegg",
    "nl": "Blogberichten",
    "pt-BR": "Posts do blog",
    "pt-PT": "Publicações no blogue",
    "sv": "Blogginlägg",
    "th": "โพสต์บล็อก",
    "zh-CN": "博客文章",
    "zh-TW": "部落格文章"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "da": "Overskrift",
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "En-tête",
        "hi": "शीर्षक",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "ms": "Tajuk",
        "nb": "Overskrift",
        "nl": "Kop",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "da": "Blogopslag",
        "de": "Blogposts",
        "en": "Blog posts",
        "es": "Entradas del blog",
        "fi": "Blogijulkaisut",
        "fr": "Articles de blog",
        "hi": "ब्लॉग पोस्ट",
        "it": "Articoli del blog",
        "ja": "ブログ記事",
        "ko": "블로그 게시물",
        "ms": "Catatan blog",
        "nb": "Blogginnlegg",
        "nl": "Blogberichten",
        "pt-BR": "Posts do blog",
        "pt-PT": "Publicações no blogue",
        "sv": "Blogginlägg",
        "th": "โพสต์บล็อก",
        "zh-CN": "博客文章",
        "zh-TW": "部落格文章"
      }
    },
    {
      "id": "blog",
      "type": "blog",
      "label": {
        "da": "Blog",
        "de": "Blog",
        "en": "Blog",
        "es": "Blog",
        "fi": "Blogi",
        "fr": "Blog",
        "hi": "ब्लॉग",
        "it": "Blog",
        "ja": "ブログ",
        "ko": "블로그",
        "ms": "Blog",
        "nb": "Blogg",
        "nl": "Blog",
        "pt-BR": "Blog",
        "pt-PT": "Blogue",
        "sv": "Blogg",
        "th": "บล็อก",
        "zh-CN": "博客",
        "zh-TW": "部落格"
      }
    },
    {
      "type": "range",
      "id": "post_limit",
      "label": {
        "da": "Opslag",
        "de": "Posts",
        "en": "Posts",
        "es": "Publicaciones",
        "fi": "Julkaisut",
        "fr": "Articles",
        "hi": "पोस्ट",
        "it": "Articoli",
        "ja": "投稿",
        "ko": "게시물",
        "ms": "Siaran",
        "nb": "Innlegg",
        "nl": "Berichten",
        "pt-BR": "Posts",
        "pt-PT": "Publicações",
        "sv": "Inlägg",
        "th": "โพสต์",
        "zh-CN": "文章",
        "zh-TW": "貼文"
      },
      "min": 3,
      "max": 12,
      "step": 3,
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "blog_show_author",
      "label": {
        "da": "Vis forfatter",
        "de": "Autor anzeigen",
        "en": "Show author",
        "es": "Mostrar autor",
        "fi": "Näytä tekijä",
        "fr": "Afficher l'auteur",
        "hi": "लेखक दिखाएं",
        "it": "Mostra autore",
        "ja": "執筆者を表示する",
        "ko": "작성자 표시",
        "ms": "Tunjukkan pengarang",
        "nb": "Vis forfatter",
        "nl": "Auteur weergeven",
        "pt-BR": "Mostrar autor",
        "pt-PT": "Mostrar autor",
        "sv": "Visa författare",
        "th": "แสดงผู้เขียน",
        "zh-CN": "显示作者",
        "zh-TW": "顯示作者"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "blog_show_date",
      "label": {
        "da": "Vis dato",
        "de": "Datum anzeigen",
        "en": "Show date",
        "es": "Mostrar fecha",
        "fi": "Näytä päivämäärä",
        "fr": "Afficher la date",
        "hi": "दिनांक दिखाएं",
        "it": "Mostra data",
        "ja": "日付を表示する",
        "ko": "날짜 표시",
        "ms": "Tunjukkan tarikh",
        "nb": "Vis dato",
        "nl": "Datum weergeven",
        "pt-BR": "Exibir data",
        "pt-PT": "Mostrar data",
        "sv": "Visa datum",
        "th": "แสดงวันที่",
        "zh-CN": "显示日期",
        "zh-TW": "顯示日期"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": {
        "da": "Vis knappen \"Se flere\"",
        "de": "'Alle anzeigen' Button anzeigen",
        "en": "Show 'View all' button",
        "es": "Mostrar el botón 'Ver todo'",
        "fi": "Näytä \"Näytä kaikki\" -painike",
        "fr": "Afficher le bouton “Voir tout”",
        "hi": "'सभी देखें' बटन दिखाएं",
        "it": "Mostra il pulsante \"Visualizza tutto\"",
        "ja": "「すべて表示」ボタンを表示する",
        "ko": "'모두 보기' 버튼 표시",
        "ms": "Tunjukkan butang 'Lihat semua'",
        "nb": "Vis «Se alle»-knapp",
        "nl": "Knop 'Alles weergeven' weergeven",
        "pt-BR": "Exibir botão \"Visualizar tudo\"",
        "pt-PT": "Mostrar botão 'Ver tudo'",
        "sv": "Visa \"Visa alla\"-knappen",
        "th": "แสดงปุ่ม 'ดูทั้งหมด'",
        "zh-CN": "显示“查看全部”按钮",
        "zh-TW": "顯示「檢視全部」按鈕"
      },
      "default": false
    }
  ],
  "presets": [
    {
      "name": {
        "da": "Blogopslag",
        "de": "Blogposts",
        "en": "Blog posts",
        "es": "Entradas del blog",
        "fi": "Blogijulkaisut",
        "fr": "Articles de blog",
        "hi": "ब्लॉग पोस्ट",
        "it": "Articoli del blog",
        "ja": "ブログ記事",
        "ko": "블로그 게시물",
        "ms": "Catatan blog",
        "nb": "Blogginnlegg",
        "nl": "Blogberichten",
        "pt-BR": "Posts do blog",
        "pt-PT": "Publicações no blogue",
        "sv": "Blogginlägg",
        "th": "โพสต์บล็อก",
        "zh-CN": "博客文章",
        "zh-TW": "部落格文章"
      },
      "category": {
        "da": "Blog",
        "de": "Blog",
        "en": "Blog",
        "es": "Blog",
        "fi": "Blogi",
        "fr": "Blog",
        "hi": "ब्लॉग",
        "it": "Blog",
        "ja": "ブログ",
        "ko": "블로그",
        "ms": "Blog",
        "nb": "Blogg",
        "nl": "Blog",
        "pt-BR": "Blog",
        "pt-PT": "Blogue",
        "sv": "Blogg",
        "th": "บล็อก",
        "zh-CN": "博客",
        "zh-TW": "部落格"
      },
      "settings": {
        "blog": "News",
        "post_limit": 3
      }
    }
  ]
}
{% endschema %}
